<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="shopcart.css">
</head>

<body>
    <!-- 购物车 -->
    <div class="shop-cart">
        <div class="cart">
            <div class="rtitle clear">
                <p class="title-name">购物车</p>
                <p class="administer">管理</p>
                <p class="complete">完成</p>
            </div>
            <div class="all">
                <p class="common">
                    共
                    <span class="num">0</span>
                    件宝贝
                </p>
            </div>
            <!-- 商品 -->
            <div class="goods">
                <ul>
                    <li>
                        <div class="store">
                            <input type="checkbox" class="choice">
                            <img class="tianmao" src="pic/jingdong.png">
                            <p class="store-name">自定义数码专卖店 <img src="pic/rightarrow.png"></p>
                        </div>
                        <div class="wares">
                            <input type="checkbox" class="select">
                            <img class="good-img"
                                src="https://img10.360buyimg.com/mobilecms/s200x200_jfs/t1/171497/15/16238/180958/606817ebE78f86982/5ee3ce2758eedc90.jpg!q70.dpg.webp">
                            <div class="introduce">
                                <p class="goods-name">
                                    华为耳机有线type-c耳机
                                </p>
                                <p class="specs">
                                    服务
                                    <img src="https://gw.alicdn.com/tfs/TB1c5y0Eb2pK1RjSZFsXXaNlXXa-10-6.png?getAvatar=avatar_24x24q90_.webp"
                                        alt="">
                                </p>
                                <p class="price"><span>￥</span><span>29</span>.<span>8</span></p>
                                <button class="minus">-</button>
                                <input class="goods-num" type="text" value="1">
                                <button class="add">+</button>
                            </div>


                        </div>

                    </li>
                </ul>
            </div>
            <!-- 没有商品 -->
            <div class="empty">

            </div>

        </div>
        <img class="like" src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
            class="recommend-hd-bg" data-spm-anchor-id="a215s.7406091.recommend.i0.17436770JNQTsZ">
        <div class="like-goods">
            <div class="lgoods">
                <img class="like-img"
                    src="https://img10.360buyimg.com/mobilecms/s350x350_jfs/t1/117397/3/12588/93560/5f143c31E7d72b1fa/ddb12e1eb06155c1.jpg!q70.dpg.webp"
                    alt="">
                <p class="like-name">JEEP 吉普 夏季冰丝防晒衣男士薄款休闲宽松上衣</p>
                <p class="like-price"><span>￥</span><span>45</span>.<span>8</span></p>
                <p class="pay-num">122人付款</p>
                <button class="resemble">相似</button>
            </div>
            <div class="lgoods">
                <img class="like-img"
                    src="https://img10.360buyimg.com/mobilecms/s350x350_jfs/t1/117397/3/12588/93560/5f143c31E7d72b1fa/ddb12e1eb06155c1.jpg!q70.dpg.webp"
                    alt="">
                <p class="like-name">JEEP 吉普 夏季冰丝防晒衣男士薄款休闲宽松上衣</p>
                <p class="like-price"><span>￥</span><span>45</span>.<span>8</span></p>
                <p class="pay-num">122人付款</p>
                <button class="resemble">相似</button>
            </div>
        </div>
        <div class="like-goods">
            <div class="lgoods">
                <img class="like-img"
                    src="https://img10.360buyimg.com/mobilecms/s350x350_jfs/t1/117397/3/12588/93560/5f143c31E7d72b1fa/ddb12e1eb06155c1.jpg!q70.dpg.webp"
                    alt="">
                <p class="like-name">JEEP 吉普 夏季冰丝防晒衣男士薄款休闲宽松上衣</p>
                <p class="like-price"><span>￥</span><span>45</span>.<span>8</span></p>
                <p class="pay-num">122人付款</p>
                <button class="resemble">相似</button>
            </div>
            <div class="lgoods">
                <img class="like-img"
                    src="https://img10.360buyimg.com/mobilecms/s350x350_jfs/t1/117397/3/12588/93560/5f143c31E7d72b1fa/ddb12e1eb06155c1.jpg!q70.dpg.webp"
                    alt="">
                <p class="like-name">JEEP 吉普 夏季冰丝防晒衣男士薄款休闲宽松上衣</p>
                <p class="like-price"><span>￥</span><span>45</span>.<span>8</span></p>
                <p class="pay-num">122人付款</p>
                <button class="resemble">相似</button>
            </div>
        </div>

    </div>

    <!-- 管理 -->
    <div class="manage clear">
        <input type="checkbox" class="mall">
        <span class="sel">全选</span>
        <p class="amount">合计:</p>
        <p class="money">￥<span>0</span></p>
        <button class="settle">结算(0)</button>

    </div>
    <!-- 完成 -->
    <div class="comp clear">
        <input type="checkbox" class="mall">
        <span class="sel">全选</span>
        <p class="clean">清理</p>
        <p class="collect">移入收藏夹</p>
        <p class="del">删除</p>
    </div>

    <div class="footer">


    </div>
    



    <script>
        var manage = document.getElementsByClassName('manage')[0]
        var comp = document.getElementsByClassName('comp')[0]
        var administer = document.getElementsByClassName('administer')[0]
        var complete = document.getElementsByClassName('complete')[0]

        administer.onclick = function () {
            administer.style.display = 'none'
            comp.style.display = 'block'
            manage.style.display = 'none'
            complete.style.display = 'block'
        }

        complete.onclick = function () {
            administer.style.display = 'block'
            comp.style.display = 'none'
            manage.style.display = 'block'
            complete.style.display = 'none'
        }

    </script>






</body>

</html>